<template>
  <div class="app-container flex column">
    <top-title :content="content" :updateTime="true" style="margin-bottom: 10px"></top-title>
    <div class="content-wrap flex f1" style="overflow: hidden">
      <div class="left flex column">
        <div class="common-title flex align-center">
          <div class="icon"></div>
          <div class="context">行业分类</div>
        </div>
        <div class="sider-wrap">
          <sider></sider>
        </div>
      </div>
      <div class="right flex column" style="position: relative">
        <div v-has="'check-content:add'" class="add-btn cursor" @click="handelAddEdit(queryParam)">新增</div>
        <div class="common-title flex align-center">
          <div class="icon"></div>
          <div class="context">检查类型</div>
        </div>

        <div class="item-group f1 flex column">
          <div class="search-group">
            <div class="input-wrap">
              <div class="label">类型名称:</div>
              <div class="input-item">
                <a-input
                  v-model="queryParam.industryExamineName"
                  :maxLength="30"
                  clearable
                  placeholder="请输入类型名称"
                />
              </div>
            </div>
            <div class="btn-wrap">
              <a-button class="searchBtn" type="primary" @click="searchQuery()"> 搜索 </a-button>
              <a-button class="resetBtn" type="primary" @click="searchReset()"> 重置 </a-button>
            </div>
          </div>
          <div class="common-item-wrap">
            <div v-for="(item, index) in dataSource" :key="index" class="common-wrap flex column">
              <section class="flex align-center justify-between">
                <div class="left-content flex align-center text-overflow">
                  <img alt="" src="@/assets/imgs/logo2.png" />
                  <a-tooltip placement="bottom">
                    <template #title> {{ item.industryExamineName }}</template>
                    <div class="content cursor text-overflow">{{ item.industryExamineName }}</div>
                  </a-tooltip>
                </div>
                <!-- 右边 Dropdown 内容 -->
                <div class="right-content" style="margin-left: 20px">
                  <a-dropdown>
                    <a class="ant-dropdown-link" style="font-size: 24px" @click="(e) => e.preventDefault()"> ⋮ </a>
                    <a-menu slot="overlay">
                      <a-menu-item>
                        <span v-has="'check-content:detail'" class="dropdown-color" @click="jumpTargetPage(item)"
                          >详情</span
                        >
                      </a-menu-item>
                      <a-menu-item>
                        <span v-has="'check-content:edit'" class="dropdown-color" @click="handelAddEdit(item)"
                          >编辑</span
                        >
                      </a-menu-item>
                      <a-menu-item v-has="'check-content:chageStatus'">
                        <span v-if="item.examineStatus == 0" class="dropdown-color" @click="handelChageStatus(item, 1)"
                          >启用
                        </span>
                        <span v-else class="dropdown-color" @click="handelChageStatus(item, 0)">禁用 </span>
                      </a-menu-item>
                      <a-menu-item>
                        <span v-has="'check-content:delete'" class="dropdown-del-color" @click="showDelete(item)"
                          >删除</span
                        >
                      </a-menu-item>
                    </a-menu>
                  </a-dropdown>
                </div>
              </section>

              <div class="f1 flex column justify-around bot">
                <div class="flex justify-between">
                  <div>
                    检查类别:<span>{{ item.categoryCount || 0 }}类</span>
                  </div>
                  <span v-has="'check-content:category'" class="click" @click="showCategory(item)">配置</span>
                </div>
                <div class="flex justify-between">
                  <div>
                    检查项:<span>{{ item.detailCount || 0 }}项</span>
                  </div>
                  <span v-has="'check-content:detailCount'" class="click" @click="jumpTargetPage(item)">配置</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 添加 编辑 配置项 -->
    <add-modal ref="addEditAddress" @refresh="searchQuery()"></add-modal>
    <!-- 检查类别弹窗 -->
    <category-modules ref="category" @refresh="searchQuery()"></category-modules>
    <allMessage
      ref="allMessage"
      :publicVisible="publicVisible"
      @cancel="publicVisible = false"
      @tipMessage="tipMessage"
    ></allMessage>
  </div>
</template>

<script>
import sider from '../components/sider'
import addModal from './modules/addContent'
import topTitle from '@/components/topTitle'
import allMessage from '@/components/allMessage'
import categoryModules from './modules/categoryModules'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { examineUpdate, examineDelete } from '@/api/industry'
import { deleteAction, getAction, downFile, getFileAccessHttpUrl } from '@/api/manage'
import { mapState } from 'vuex'
export default {
  components: { sider, addModal, topTitle, allMessage, categoryModules },
  mixins: [JeecgListMixin],
  computed: {
    ...mapState({
      industryInformationId: (state) => state.user.industryInformationId,
    }),
  },
  watch: {
    industryInformationId(v) {
      this.queryParam.industryInformationId = v
      this.searchQuery()
    },
  },
  data() {
    return {
      url: {
        list: 'industry/examine/list',
      },
      content: [['检查内容']],
      queryParam: {},
      disableMixinCreated: true,
      publicVisible: false,
    }
  },
  mounted() {
    this.searchQuery()
  },
  methods: {
    searchQuery() {
      this.queryParam.industryInformationId = this.$store.state.user.industryInformationId || '111' // 无意义 处理一开始获取不到报400的问题
      this.loadData()
    },
    loadData(arg) {
      var params = this.getQueryParams()
      this.loading = true
      getAction(this.url.list, params)
        .then((res) => {
          if (res.code == 200) {
            this.dataSource = res.result
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch((rsp) => {
          console.log(rsp)
        })
        .finally(() => {
          this.loading = false
        })
    },

    jumpTargetPage(params) {
      if (params.categoryCount == 0) {
        this.$message.error('请先添加检查类别')
        return
      }
      this.$router.push({ path: '/industry/check/articleDetails', query: { params } })
    },

    handelAddEdit(records) {
      this.$refs.addEditAddress.show(records)
    },

    async handelChageStatus(records, type) {
      let res = await examineUpdate({ id: records.id, examineStatus: type })
      this.$message.success(res.message)
      this.searchQuery()
    },

    showDelete(records) {
      this.publicVisible = true
      this.$refs.allMessage.show(records)
    },

    tipMessage(records) {
      examineDelete({ id: records.id }).then((res) => {
        this.$message.success(res.message)
        this.publicVisible = false
        this.searchQuery()
      })
    },

    showCategory(records) {
      this.$refs.category.show(records)
    },
  },
  destroy() {},
}
</script>

<style lang="less" scoped>
.app-container {
  padding-top: 0;
  .left {
    flex: 1.3;
    background: var(--theme-container-bg);
    .sider-wrap {
      overflow-y: scroll;
      &::-webkit-scrollbar {
        width: 0;
      }
    }
  }
  .right {
    flex: 8.7;
    margin-left: 16px;
    background: var(--theme-container-bg);

    .common-item-wrap {
      // padding: 0 0 30px 0;
      display: flex;
      flex-wrap: wrap;
      height: 6rem;
      overflow-y: scroll;
      &::-webkit-scrollbar {
        width: 0;
      }
    }
    .common-wrap {
      width: 340px;
      height: 178px;
      background: var(--theme-container-bg);
      border-radius: 2px;
      border: 0.01rem solid var(--theme-input-border);
      padding: 0 20px;
      margin: 16px;

      section {
        height: 70px;
        padding-top: 15px;
        border-bottom: 1px solid #09427a;
        .left-content {
          font-size: 0.2rem;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: var(--theme-modal-label-value-color);
          .content {
            width: 234px;
            margin-left: 5px;
          }
        }
      }

      .bot {
        padding: 0 0 0 50px;
        font-size: 16px;
        font-weight: 500;
        color: #509eee;
        span {
          font-size: 16px;
          color: #1388ff;
        }

        .click {
          font-size: 14px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #47e829;
          cursor: pointer;
        }
      }
    }
  }

  background: var(--theme-content-bg);
  .common-title {
    height: 0.6rem;
    line-height: 0.6rem;
    padding-left: 0.26rem;
    border-bottom: 2px solid var(--theme-input-border);
    // transform: translateY(-6px);
    .icon {
      width: 8px;
      height: 8px;
      background: #1388ff;
      border-radius: 50%;
      margin-right: 8px;
    }
    .context {
      font-size: 0.16rem;
      font-weight: 500;
      color: #1388ff;
    }
  }
}
</style>
